<template>
	<view>
		<NavBar :text='text'></NavBar>
		<view style="width: 100%; height: 123rpx;"></view>
		<view style="background-color: #fff;">
			<view style="width: 100%; height: 20rpx;"></view>
			<view class="flx1" style="width: 90%; margin:0 auto;">
				<view class="flx1">
					<view class="flxAlign">
						<view style="width: 100rpx; height: 100rpx;">
							<image style="width: 100%; height: 100%;" src="/static/reservationRegister/userheader.png">
							</image>
						</view>
					</view>
					<view style="margin-left:20rpx;">
						<view class="flx">
							<view class="name">{{yhinfo.name}}</view>
							<view class="sex">{{yhinfo.ks}}</view>
						</view>
						<view class="age">{{yhinfo.date}}</view>
					</view>
				</view>
			</view>
			<view style="width: 100%; height: 20rpx;"></view>
		</view>

		<view
			style="width: 100%; height: 60rpx; background-color: #f7f7f7; line-height: 60rpx; font-size: 30rpx; color:#cecece;">
			<view style="width: 90%; margin:0 auto;">
				选择就诊人
			</view>
		</view>
		<view class="zstyle">
			<view style="width: 90%; margin:0 auto;">
				<view class="flx zstyle_border">
					<view class="zstyle_border_text">就诊人</view>
					<view class="flx1">
						<view class="zstyle_border_text_ u-line-1">{{blinfo.yy}}</view>
						<view class="flxAlign">
							<u-icon name="arrow-right" color="#cecece" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view class="flx zstyle_border">
					<view class="zstyle_border_text">手机号</view>
					<view class="flx1">
						<view class="zstyle_border_text_ u-line-1 flxAlign">
							<input style="width: 100%; margin-top: 28rpx;" v-model="value" placeholder="请输入手机号" />
						</view>
						<view class="flxAlign">
							<u-icon name="arrow-right" color="#cecece" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view class="flx zstyle_border">
					<view class="zstyle_border_text">基本健康信息</view>
					<view class="flx1">
						<view class="zstyle_border_text_ u-line-1">{{blinfo.zyy}}</view>
						<view class="flxAlign">
							<u-icon name="arrow-right" color="#cecece" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view class="flx1 zstyle_border">
					<view class="zstyle_border_text">病情信息</view>
					<view style="width: 60%; margin-left: 10%;">
						<view style="width: 100%; height: 30rpx;"></view>
						<textarea v-model="value1" placeholder="请详细描述你的病情，症状治疗经过以及想要获得的帮助"
							style="height: 180rpx; width: 100%;  marghin-top:20rpx;"></textarea>
					</view>
				</view>
				<view class="flx1 zstyle_border" style="border-bottom: none;">
					<view class="zstyle_border_text">图片资料</view>
					<view class="flx1 flxAlign" style="margin-left:40rpx;">
						<view style="width: 100%; height: 30rpx;"></view>
						<u-upload
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								multiple
								:maxCount="10"
							></u-upload>
					</view>
				</view>
				<view style="font-size: 25rpx; color:#a5a5a5; margin-left: 25rpx; line-height: 50rpx;">
					<view>备注</view>
					<view>1、图片支持ip9、png格式</view>
					<view>2、最多可上传6张图片，单张图片最大支持8M.</view>
				</view>
				<view style="width: 100%; height: 20rpx;"></view>
			</view>
		</view>
		<view style="font-size: 25rpx; color:#a5a5a5; margin-left: 25rpx; line-height: 40rpx; width: 90%; margin:0 auto; margin-top:30rpx;">
			<view>温馨提示:</view>
			<view>1.购买在线咨询包月服务后，指定就诊人在未来30天内《含购买当天)可向对应医生发起无限次图文咨询和2次电话咨询;</view>
			<view>2.30天包月服务到朋或者免费咨询次数用完后，线上咨询服务恢复按次收费;</view>
			<view>3.不同就诊人需分别购买:</view>
			<view>4.每个就诊人在30天服务周期内仅可购买一次相同医生的包月服务;</view>
		</view>
		<view style="width: 100%; background-color: #fff; height: 100rpx; overflow: hidden; box-sizing: border-box;">
			<view class="button" @click="ljjn">立即缴费</view>
		</view>
		
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				text:'转诊申请',
				value: '',
				value1: '',
				fileList1: [],
				yhinfo: {
					name: '林开支',
					ks: '产科',
					date: '主任医师',
				},
				blinfo: {
					yy: '李莉莉 D66880604',
					label: '普通患者',
					zyy: '李莉莉的健康信息',
					message: '转诊原因转诊原因转诊原因',
					zd: '斑疹伤寒',
					info: '病情描述病情描述病情描述'
				},
				radiolist1: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				radiovalue1: '是',
			}
		},
		onLoad(e){
			if(e.datas == 1){
				this.text =  '在线咨询'
			}
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			ljjn(){
				uni.navigateTo({
					url:'/pages/OnlineConsultation/ljjf'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.name {
		font-size: 30rpx;
		line-height: 50rpx;
		color: #333;
		font-weight: 600;
	}

	.sex {
		font-size: 30rpx;
		line-height: 50rpx;
		color: #a6a6a6;
		margin-left: 15rpx;
	}

	.age {
		font-size: 30rpx;
		line-height: 50rpx;
		color: #a6a6a6;
		// margin-left: 15rpx;
	}

	.zstyle {
		width: 100%;
		background-color: #fff;

		.zstyle_border {
			border-bottom: 1rpx solid #f5f5f5;
			line-height: 100rpx;

			.zstyle_border_text {
				font-size: 30rpx;
				color: #333;
				width: 28%;
				// text-align: end;
			}

			.zstyle_border_text_ {
				width: 100%;
				width: 330rpx;
				font-size: 30rpx;
				color: #a6a6a6;
				text-align: end;
			}
		}
	}

	.button {
		width: 85%;
		margin: 0 auto;
		background-color: #ffcc33;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		letter-spacing: 1rpx;
		border-radius: 45rpx;
		font-size: 28rpx;
		margin-top: 10rpx;
	}
</style>